<template>
    <div class="dm-layout">
        <el-container>
            <el-aside :width="$store.state.asideWidth">
                <custom-menu></custom-menu>
            </el-aside>
            <el-container>
                <!-- header -->
                <el-header style="padding: 0; height: auto">
                    <custom-header></custom-header>
                </el-header>
                <!-- <el-main style="padding: 10px; background: #ECF1F5;"> -->
                <el-main style="padding: 10px; background: #F5F8FF;">
                    <!-- 路由插座 -->
                    <transition name="fade-transform" mode="out-in">
                        <el-scrollbar class="main-box">
                            <router-view></router-view>
                        </el-scrollbar>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import CustomMenu from "@/components/CustomMenu";
    import CustomHeader from "@/components/CustomHeader";

    export default {
        name: "layout",
        components: {
            CustomMenu,
            CustomHeader,
        },
    };
</script>
